<template>
  <a-head v-if="!editors || editors.length === 0"
          :user="user"
          :size="size"
          :username="username"
          :head="size > 16 && head"
          :slogan="slogan"></a-head>
  <div v-else class="row items-center">
    <template v-if="editors.length <= 5">
      <a-head :user="user"
              :size="size"
              :username="dense ? false : username"
              :head="head"
              :slogan="slogan"></a-head>
      <a-head  v-for="editor in editors"
               :key="editor.id"
               :user="editor"
               :username="dense ? false : username"
               :size="size"
               :head="head"
               :slogan="slogan"></a-head>
    </template>
    <template v-else>
      <a-head :user="user"
              :size="size"
              :slogan="false"></a-head><span>等{{ editors.length }}人</span>
    </template>
  </div>
</template>

<script>
    export default {
      name: 'aHeads',
      props: {
        user: {
          type: Object,
          required: true
        },
        size: {
          type: Number,
          required: false,
          default: 32
        },
        editors: {
          type: Array,
          required: false,
          default(){
            return []
          }
        },
        dense: {
          type: Boolean,
          required: false,
          default: true
        },
        username: {
          type: Boolean,
          required: false,
          default: true
        },
        head: {
          type: Boolean,
          required: false,
          default: true
        },
        slogan: {
          type: Boolean,
          required: false,
          default: true
        }
      },
      data () {
        return {
        }
      },
      computed: {
      },
      watch: {
      },
      methods: {
      }
    }
</script>

<style lang="stylus">
</style>
